<template>
	<view class="t1">
		<view class="t3">
			<view :class="['t4', userRole == 2 ? 'initHide' : '', isClick ? (userRole == 1 ? 'an_in' : 'an_out') : '']">
				<image :src="`${imgUrl}${userRole == 1 ? 10 : 9}.png`"></image>
			</view>
			<view :class="['t4', userRole == 1 ? 'initHide' : '', isClick ? (userRole == 1 ? 'an_out' : 'an_in') : '']">
				<image :src="`${imgUrl}${userRole == 1 ? 11 : 12}.png`"></image>
			</view>
		</view>
		<view class="t5">您当前身份为“{{ userRole == 1 ? '牛人' : userRole == 2 ? 'Boss' : '' }}”</view>
		<view class="t6">
			<button @click="updateRole()">
				切换为“{{ userRole == 1 ? 'Boss' : userRole == 2 ? '牛人' : '' }}”身份
			</button>
		</view>
		<view class="t7"><button @click="$mRouter.back(1)">返回</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data() {
		return {
			isClick: 0,
			imgUrl: 'https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/'
		}
	},
	onLoad() {
		this.isClick = 0
	},
	computed: {
		...mapState(['userRole'])
	},
	methods: {
		updateRole() {
			this.isClick++
			const newRole = this.userRole == 1 ? 2 : 1
			this.$store.commit('SET_USERROLE', newRole)
		}
	}
}
</script>
<style lang="scss" scoped>
@keyframes fade_in {
	from {
		top: -26rpx;
		transform: scale(0.95);
	}
	to {
		top: 0;
		transform: scale(1);
	}
}
@keyframes fade_out {
	from {
		top: 0;
		transform: scale(1);
	}
	to {
		top: -26rpx;
		transform: scale(0.95);
	}
}
.t1 {
	width: 100%;
	position: relative;
	.t3 {
		display: flex;
		height: 645upx;
		padding-left: 60rpx;
		padding-top: 114rpx;
		.t4 {
			position: relative;
			width: 284rpx;
			height: 645rpx;
			top: 0;

			&:nth-of-type(1) {
				margin-right: 112rpx;
			}

			&.an_in {
				animation: fade_in 300ms ease 1 forwards;
			}
			&.an_out {
				animation: fade_out 300ms ease 1 forwards;
			}

			&.initHide {
				top: -26rpx;
				transform: scale(0.95);
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.t5 {
		font-size: 36upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		margin-top: 22upx;
	}
	.t6 {
		width: 100%;
		text-align: center;
		button {
			width: 592upx;
			height: 88upx;
			background: #84c0f4;
			border-radius: 8upx 8upx 8upx 8upx;
			opacity: 1;
			font-size: 30upx;
			font-family: Source Han Sans SC-Medium, Source Han Sans SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 88upx;
			margin-top: 108upx;
		}
	}
	.t7 {
		width: 100%;
		text-align: center;
		// padding-bottom: 60rpx;
		button {
			width: 592upx;
			height: 88upx;
			border-radius: 8upx 8upx 8upx 8upx;
			opacity: 1;
			border: 2upx solid #84c0f4;
			font-size: 37upx;
			font-family: Source Han Sans SC-Medium, Source Han Sans SC;
			font-weight: 500;
			color: #84c0f4;
			line-height: 88upx;
			margin-top: 28upx;
			text-align: center;
			background: #fff;
		}
	}
}
</style>
